<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const emit = defineEmits(['myClick']);

const props = defineProps({
  iNow: {
    type: Number,
    default: 0
  }
});

const currentData = ref<any>({
});

const checkFn = (type: any) => {
  
  router.push(type)

}


</script>

<template>
  <section class="bottomTabUtil">
    <div class="item" @click="checkFn('/message')">
      <div class="icon p2p " :class="{'p2p-active': props.iNow == 0}"></div>
      <div>消息</div>
    </div>
    <div class="item" @click="checkFn('/friend')">
      <div class="icon friend " :class="{'friend-active': props.iNow == 1}"></div>
      <div>好友</div>
    </div>
    <div class="item" @click="checkFn('/friendGroup')">
      <div class="icon more" :class="{'more-active': props.iNow == 2}"></div>
      <div>群组</div>
    </div>
    <div class="item" @click="checkFn('/personal')">
      <div class="icon my"></div>
      <div>个人</div>
    </div>
    
  </section>
</template>

<style lang="less" scoped>
.bottomTabUtil {
  width: 3.75rem;
  height: .5rem;
  background: white;
  display: flex;
  position: relative;
  .item {
    flex: 1;
    font-size: .12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
      width: .35rem;
      height: .35rem;
      
    }
    .p2p {
      background: url("../../../assets/images/p2p-icon-1.png") no-repeat center;
      background-size: cover;
    }
    .p2p-active {
      background: url("../../../assets/images/p2p-icon-2.png") no-repeat center !important;
      background-size: cover !important;
    }
    .friend {
      background: url("../../../assets/images/friend-icon-1.png") no-repeat center;
      background-size: cover;
    }
    .friend-active {
      background: url("../../../assets/images/friend-icon-2.png") no-repeat center  !important;
      background-size: cover !important;
    }
    .more {
      background: url("../../../assets/images/chat-more-icon-1.png") no-repeat center;
      background-size: cover;
    }
    .more-active {
       background: url("../../../assets/images/chat-more-icon-2.png") no-repeat center !important;
      background-size: cover !important;
    }
    .my {
      background: url("../../../assets/images/one-icon-1.png") no-repeat center;
      background-size: cover;
    }
  }
}
</style>

